/*@media (max-width: 1200px) {
  legend {
    font-size: calc(1.275rem + 0.3vw);
  }
  h1,
  .h1 {
    font-size: calc(1.375rem + 1.5vw);
  }
  h2,
  .h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
  h3,
  .h3 {
    font-size: calc(1.3rem + 0.6vw);
  }
  h4,
  .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
  .display-1 {
    font-size: calc(1.725rem + 5.7vw);
  }
  .display-2 {
    font-size: calc(1.675rem + 5.1vw);
  }
  .display-3 {
    font-size: calc(1.575rem + 3.9vw);
  }
  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
  }
  .close {
    font-size: calc(1.275rem + 0.3vw);
  }
  .p,
  p {
    font-size: calc(0.55rem + 0.375vw);
    margin-bottom: calc(0.55rem + 0.375vw);
  }
}
*/

.vl {
  border-left: 2px solid var(--color-green-light);
  padding-left: 2rem;
}

.p-xs {
  font-size: 10px;
  line-height: 16px;
  font-weight: 400;
  font-family: "Lexend Deca";
  font-style: normal;
}

.p-large {
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
  font-family: "Lexend Deca";
  font-style: normal;
}

/* Colors */
.bg-white {
  background-color: var(--color-white);
}

.bg-grey {
  background-color: var(--color-grey-light);
}

.bg-emerald {
  background-color: var(--color-petrol);
}

.bg-primary {
  background-color: var(--color-petrol);
}

.bg-blue2 {
  background-color: var(--color-blue);
}

.bg-light-blue {
  background-color: #cceaff;
}

.bg-grey-white-gradient {
  background: linear-gradient(0deg, #ccd8da, var(--color-grey-light)), var(--color-white);
}

.bg-light-grey-white-gradient {
  background: linear-gradient(
      0deg,
      rgba(229, 235, 236, 0.5),
      rgba(229, 235, 236, 0.5)
    ),
    var(--color-white);
}

.font-white {
  color: var(--color-white) !important;
}

.font-grey {
  color: #ccd8da !important;
}

.font-green {
  color: var(--color-green-light) !important;
}

.font-dark-grey {
  color: var(--color-primary-text) !important;
}

.font-dark-green {
  color: var(--color-petrol);
}

.font-red {
  color: #dc341c;
}

.hr-light-green {
  border: 2px solid var(--color-green-light);
  opacity: 1;
  width: 20%;
}

/* Classes */
.responsive {
  max-width: 90%;
  height: auto;
}

@media only screen and (max-width: 600px) {
  .responsive {
    max-width: 100%;
    height: auto;
  }
}

.img-responsive {
  max-width: 100%;
  height: auto;
}

.img-grid-responsive {
  max-width: 100%;
  height: auto;
  min-height: 300px;
  object-fit: cover;
}

.bordered {
  border: 2px solid var(--color-green-light);
}

.container-only-left {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  /*overflow: hidden;*/
}
@media (min-width: 576px) {
  .container-only-left {
    margin-left: calc(50% - 272px);
    margin-right: calc(50% - 265px);
  }
}
@media (min-width: 768px) {
  .container-only-left {
    margin-left: calc(50% - 362px);
    margin-right: 0px;
    padding-right: 0px;
  }
}
@media (min-width: 992px) {
  .container-only-left {
    margin-left: calc(50% - 480px);
    margin-right: 0px;
    padding-right: 0px;
  }
}
@media (min-width: 1200px) {
  .container-only-left {
    margin-left: calc(50% - 572px);
    margin-right: 0px;
    padding-right: 0px;
  }
}
@media (min-width: 1400px) {
  .container-only-left {
    margin: 0 3em;
    padding-right: 0px;
  }
}

.container-only-right {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
}
@media (min-width: 576px) {
  .container-only-right {
    margin-left: calc(50% - 272px);
    margin-right: calc(50% - 265px);
  }
}
@media (min-width: 768px) {
  .container-only-right {
    margin-right: calc(50% - 362px);
    margin-left: 0px;
    padding-left: 0px;
  }
}
@media (min-width: 992px) {
  .container-only-right {
    margin-right: calc(50% - 480px);
    margin-left: 0px;
    padding-left: 0px;
  }
}
@media (min-width: 1200px) {
  .container-only-right {
    margin-right: calc(50% - 572px);
    margin-left: 0px;
    padding-left: 0px;
  }
}
@media (min-width: 1400px) {
  .container-only-right {
    margin-right: calc(50% - 662px);
    margin-left: 0px;
    padding-left: 0px;
  }
}

.col-padding-left {
  padding-left: calc(var(--bs-gutter-x) * 0.5);
}

.fs-edit {
  position: absolute;
  z-index: 999;
  width: 25%;
  height: 32px;
  margin: 16px;
}
.fs-edit a {
  background: var(--color-white);
  padding: 6px;
  border: 2px solid var(--color-petrol);
  color: var(--color-petrol);
  border-radius: 2px;
  font-size: 12px;
}

.rich-text-cta .container-dark {
  background-color: var(--color-petrol);
  font-family: "Lexend Deca";
  font-style: normal;
}
.rich-text-cta .container-dark h3 {
  font-weight: 400;
  font-size: 56px;
  line-height: 64px;
  color: var(--color-white);
}
.rich-text-cta .container-dark h2 {
  color: #ccd8da;
}
.rich-text-cta .container-dark p {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #ccd8da;
}
.rich-text-cta .container-dark a {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: var(--color-white);
  text-decoration: none;
}
.rich-text-cta .container-dark .bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  text-align: right;
}

.rich-text-cta .container-white {
  background-color: var(--color-white);
  font-family: "Lexend Deca";
  font-style: normal;
}
.rich-text-cta .container-white h3 {
  font-weight: 400;
  font-size: 56px;
  line-height: 64px;
  color: #1a5059;
}
.rich-text-cta .container-white h2 {
  color: var(--color-primary-text);
}
.rich-text-cta .container-white p {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-primary-text);
}
.rich-text-cta .container-white a {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: var(--color-petrol);
  text-decoration: none;
}
.rich-text-cta .container-white .bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  text-align: right;
}

.rich-text-cta .container-grey {
  background-color: var(--color-grey-light);
  font-family: "Lexend Deca";
  font-style: normal;
}
.rich-text-cta .container-grey h3 {
  font-weight: 400;
  font-size: 56px;
  line-height: 64px;
  color: var(--color-petrol);
}
.rich-text-cta .container-grey h2 {
  color: var(--color-petrol);
}
.rich-text-cta .container-grey p {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-petrol);
}
.rich-text-cta .container-grey a {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: var(--color-petrol);
  text-decoration: none;
}
.rich-text-cta .container-grey .bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  text-align: right;
}